<div class="ruku-list-container">
    <!-- 搜索表单 -->
    <div class="search-form">
        <form [formGroup]="searchForm" (ngSubmit)="onSearch()">
            <div class="form-row">
                <div class="form-group">
                    <label for="ruKuNo">入库单号</label>
                    <input type="text" id="ruKuNo" formControlName="ruKuNo" placeholder="请输入入库单号">
                </div>
                <div class="form-group">
                    <label for="itemName">货品名称</label>
                    <input type="text" id="itemName" formControlName="itemName" placeholder="请输入货品名称">
                </div>
                <div class="form-group">
                    <label for="ruKuType">入库类型</label>
                    <select id="ruKuType" formControlName="ruKuType">
                        <option value="">全部</option>
                        <option *ngFor="let option of ruTypeOptions" [value]="option.id">
                            {{option.name}}
                        </option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="ruStatus">入库状态</label>
                    <select id="ruStatus" formControlName="ruStatus">
                        <option value="">全部</option>
                        <option *ngFor="let option of ruStatusOptions" [value]="option.id">
                            {{option.name}}
                        </option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="storehouseName">仓库名称</label>
                    <select id="storehouseName" formControlName="storehouseName">
                        <option value="">全部</option>
                        <option *ngFor="let option of storehouseOptions" [value]="option.warehouseName">
                            {{option.warehouseName}}
                        </option>
                    </select>
                </div>
            </div>
                
            <div class="form-actions">
                <button type="submit" class="btn btn-primary">搜索</button>
                <button type="button" class="btn btn-secondary" (click)="onReset()">重置</button>
            </div>
        </form>
    </div>

    <!-- 数据表格 -->
    <div class="data-table">
        <div class="table-header">
            <h3>入库单列表</h3>
            <div class="table-actions">
                <button class="btn btn-success" (click)="openCreateDialog()">新增入库单</button>
            </div>
        </div>

        <div class="table-container">
            <table class="table">
                <thead>
                    <tr>
                        <th>入库单号</th>
                        <th>入库类型</th>
                        <th>状态</th>
                        <th>入库日期</th>
                        <th>仓库名称</th>
                        <th>关联单号</th>
                        <th>入库货品</th>
                        <th>经办人</th>
                        <th>入库数量</th>
                        <th>入库金额</th>
                        <th>所在部门</th>
                        <th>审核人</th>
                        <th>审核时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let item of dataSource" [class.loading]="loading">
                        <td>{{item.ruKuNo}}</td>
                        <td>{{item.ruKuType}}</td>
                        <td>{{item.ruKuStatus}}</td>
                        <td>{{item.ruKuDate | date:'yyyy-MM-dd'}}</td>
                        <td>{{item.storehouseName}}</td>
                        <td>{{item.connectNo}}</td>
                        <td>{{item.itemName}}</td>
                        <td>{{item.attnName}}</td>
                        <td>{{item.ruKuNum}}</td>
                        <td>{{item.ruKuPrice}}</td>
                        <td>{{item.departName}}</td>
                        <td>{{item.shenName}}</td>
                        <td>{{item.shenDate | date:'yyyy-MM-dd'}}</td>
                        <td>
                            <button class="btn btn-sm btn-info">查看</button>
                            <button class="btn btn-sm btn-warning">编辑</button>
                            <button class="btn btn-sm btn-danger">删除</button>
                        </td>
                    </tr>
                    <tr *ngIf="dataSource.length === 0 && !loading">
                        <td colspan="7" class="no-data">暂无数据</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- 分页 -->
        <div class="pagination" *ngIf="total > 0">
            <div class="pagination-info">
                共 {{total}} 条记录，当前第 {{pageIndex}} 页
            </div>
            <div class="pagination-controls">
                <button class="btn btn-sm" [disabled]="pageIndex <= 1" (click)="onPageChange(pageIndex - 1)">
                    上一页
                </button>
                <span class="page-info">{{pageIndex}} / {{Math.ceil(total / pageSize)}}</span>
                <button class="btn btn-sm" [disabled]="pageIndex >= Math.ceil(total / pageSize)"
                    (click)="onPageChange(pageIndex + 1)">
                    下一页
                </button>
                <select class="page-size-select" (change)="onPageSizeChange($event.target.value)">
                    <option value="10">10条/页</option>
                    <option value="20">20条/页</option>
                    <option value="50">50条/页</option>
                </select>
            </div>
        </div>
    </div>
</div>
<app-ruku-create-dialog 
  [visible]="showCreateDialog" 
  (close)="closeCreateDialog()" 
  (save)="saveCreateDialog($event)">
</app-ruku-create-dialog>